<template>
  <div class="tui-editor-wrapper">
    <div id="editSection"></div>
  </div>
</template>

<script>
import TuiEditor from 'tui-editor'
import 'codemirror/lib/codemirror.css'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'highlight.js/styles/github.css'

export default {
  name: 'TuiEditor',
  data () {
    return {
      tuiEditor: null
    }
  },
  mounted () {
    this.tuiEditor = new TuiEditor({
      el: document.querySelector('#editSection'),
      initialEditType: 'markdown',
      previewStyle: 'vertical',
      height: '300px'
    })
  }
}
</script>

<style lang="less">
</style>
